<!--
  - author：Hs
  - description：底部按钮
                 @showSignature:"控制显示隐藏"
-->
<template>
  <view
    class="signatureArea"
    style="color: #333 !important; z-index: 998"
    v-if="showSignature"
  >
    <view class="signatureBox">
      <nav-bar
        title="电子签名"
        class="rotateHeader"
        back="close"
        @close="close"
      ></nav-bar>
      <canvas
        class="canvasF"
        ref="canvasF"
        canvas-id="canvasF"
        :disable-scroll="true"
        @touchstart="touchStart"
        @touchmove="touchMove"
      ></canvas>
      <HsButton
        class="rotateButton"
        leftButtonText="重置"
        @buttonConfirm="confirm"
        rightButtonText="提交"
      />
      <view class="mention" v-show="notSign">
        <text class="toast">请完成签名！</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "c_signature",
  props: {
    showSignature: { type: Boolean, default: false },
  },
  data() {
    return {
      point: {
        x: "",
        y: "",
      },
      notSign: false,
      canvasTxt: null,
    };
  },
  watch: {
    showSignature(n, o) {
      if (n) {
        this.canvasTxt = uni.createCanvasContext("canvasF", this);
        this.canvasTxt.lineWidth = 5;
        this.canvasTxt.lineGap = "round";
        this.canvasTxt.lineJoin = "round";
        this.canvasTxt.shadowBlur = 2.5;
        this.canvasTxt.shadowColor = "black";
      }
    },
  },
  methods: {
    close() {
      this.$emit("close"); //关闭事件
      this.$emit("update:showDialog", false); //默认关闭弹窗
    },
    touchStart(ev) {
      ev = ev || event;
      ev.preventDefault();
      if (ev.touches.length == 1) {
        this.point.x = ev.changedTouches[0].x + 0.5;
        this.point.y = ev.changedTouches[0].y + 0.5;
        // 触摸到即重新绘制新的线
        this.canvasTxt.beginPath();
      }
    },
    touchMove(ev) {
      ev = ev || event;
      ev.preventDefault();
      if (ev.touches.length == 1) {
        this.canvasTxt.moveTo(this.point.x, this.point.y);
        this.point.x = ev.changedTouches[0].x + 0.5;
        this.point.y = ev.changedTouches[0].y + 0.5;
        this.canvasTxt.lineTo(this.point.x, this.point.y);
        this.canvasTxt.stroke();
        this.canvasTxt.draw(true);
      }
    },
    //重写
    overwrite() {
      // 重置清空点位信息 - 非空判断
      this.point = {
        x: "",
        y: "",
      };
      this.canvasTxt.clearRect(
        0,
        0,
        this.$refs.canvasF.width,
        this.$refs.canvasF.height
      );
      this.canvasTxt.lineWidth = 5;
      this.canvasTxt.lineGap = "round";
      this.canvasTxt.lineJoin = "round";
      this.canvasTxt.shadowBlur = 2.5;
      this.canvasTxt.shadowColor = "black";
      this.canvasTxt.draw();
    },
    //提交签名
    commit() {
      //绘制完成后旋转画布
      let img = new Image();
      uni.canvasToTempFilePath({
        destWidth: 200,
        destHeight: 500,
        fileType: "jpg",
        canvasId: "canvasF",
        success: function (res) {
          // 在H5平台下，tempFilePath 为 base64
          img.src = res.tempFilePath;
        },
      });

      img.onload = () => {
        //在另一个画布里绘制，不影响节点
        const canvas = document.createElement("canvas");
        const ctx = canvas.getContext("2d");
        //画布宽高重设
        const imgWidth = img.height;
        const imgHeight = img.width;
        canvas.width = imgWidth;
        canvas.height = imgHeight;
        //画布旋转
        ctx.translate(0, img.width);
        ctx.rotate(-Math.PI / 2);
        //绘制
        ctx.drawImage(img, 0, 0);
        let imgURL = canvas.toDataURL();

        if (this.point.x == "") {
          this.notSign = true;
          setTimeout(() => {
            this.notSign = false;
          }, 1200);
          return;
        }

        // 返回签名base64
        this.$emit("commit", imgURL);
        this.close();
      };
    },
    close() {
      this.overwrite();
      this.$emit("update:showSignature", false);
    },
    confirm(val) {
      if (val == "left") {
        this.overwrite();
      } else {
        this.commit();
      }
    },
  },
};
</script>

<style scoped lang="scss">
.signatureArea {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  // top: -100vw;
  // transform-origin: bottom left;
  // transform: rotate(90deg);
}
.canvasF {
  width: calc(100vw - 44px - 70px);
  height: 100vh;
}

.signatureBox {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
  background-color: #f5f6f7;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.rotateHeader {
  width: 100vh;
  transform: rotate(90deg);
  transform-origin: top left;

  position: fixed;
  left: calc(100vw);
  top: 0;
}
.mention {
  width: 100vh;
  font-size: 0.373333rem;
  color: #fff;
  transform: rotate(90deg) translate(0, -100%);
  transform-origin: top left;
  position: absolute;
  text-align: center;
  top: 0;
  left: 50%;
  & .toast {
    padding: 8px 24px;
    border-radius: 5px;
    display: inline-block;
    background: rgba(0, 0, 0, 0.7);
  }
}
.rotateButton {
  width: 100vh !important;
  transform: rotate(90deg) translate(0, -100%);
  transform-origin: top left;
  top: 0;
}
canvas {
  // position: absolute;
  // transform-origin: top right;
  width: 100%;
  height: 100%;
}
</style>
